<template>
  <div class="the-list">

    <div class="panel-table">
      <div class="table-head">
        <span>视频配置</span>
        <!-- <div>
        <el-button type="primary">aaa</el-button>
        <el-button type="primary">bbb</el-button>
      </div> -->
      </div>
      <el-table :data="tableOPT.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="configName" label="指标"></el-table-column>
        <el-table-column prop="configKey" label="字段名"></el-table-column>
        <el-table-column prop="updatedAt" label="最近修改时间"></el-table-column>
        <el-table-column label="热度值">
          <template #default="{row}">
            {{row.configValue}}
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="{row}">
            {{row.remark}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100px">
          <template #default="{row}">
            <el-button size="small" type="primary" plain @click="openEditPanel(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tbale-hint">
        <span class="title">排序说明</span>
        初始热度值通常为用户动态id值（一个递增的整数），每完成一次播放或评论操作会增加对应的热度值，到达重置天数后热度值将重置为原来的某个幅度
      </div>
    </div>

    <el-dialog v-model="editOPT.show" width="520px">
      <template #title>
        <div style="text-align:left;">修改配置</div>
      </template>
      <div class="detail-body">
        <el-form :model="editOPT.data" class="demo-form-inline" label-width="80px">
          <el-form-item label="ID">{{editOPT.data.id}}</el-form-item>
          <el-form-item label="指标">{{editOPT.data.configName}}</el-form-item>
          <el-form-item label="字段名">{{editOPT.data.configKey}}</el-form-item>
          <el-form-item label="热度值">
            <el-input-number v-model="editOPT.data.configValue" width="120px"></el-input-number>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editOPT.data.remark" type="textarea" rows="3"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editConfig('cancel')">取消</el-button>
          <el-button type="primary" @click="editConfig('submit')">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'videoConfig',
  }
</script>
<script setup>
import { reactive } from "vue";
import { getVideoConfigList, editVideoConfig } from "@/api/config";
import { ElMessage } from "element-plus";

const editOPT = reactive({
  show: false,
  data: {},
});
let tableOPT = reactive({
  list: [],
});

getTableData();

function getTableData() {
  getVideoConfigList().then((res) => {
    console.log("res", res);
    if (res.code === 0) {
      tableOPT.list = res.data;
    }
  }).catch(err=>{
    console.log(err)
  })
}
function openEditPanel(row) {
  editOPT.show = true;
  editOPT.data = { ...row,configValue:row.configValue*1 };
}
function editConfig(operate) {
  if (operate === "submit") {
    let req = {
      id: editOPT.data.id,
      configValue: editOPT.data.configValue,
      remark: editOPT.data.remark,
    };
    console.log("req:", req);
    editVideoConfig(req).then(res=>{
      if(res.code===0){
        ElMessage.success("修改成功！");
        resetTableList();
      }

    })
  }
  editOPT.show = false;
}

function resetTableList() {
  getTableData();
}
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
// .the-list {
//   height: 100%;
// }
.el-form-item {
  margin-bottom: 8px;
}
.tbale-hint{
  .title{
    font-weight: bold;
    margin-right: 12px;
  }
  font-size: 14px;
  padding: 24px 0 12px 0;
}
</style>